<!--申请退款-->
<template>
  <div>
    <van-nav-bar title="协商历史" left-arrow @click-left="onClickLeft" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>

    <div v-for="(item,index) in detailList" :key="index">
      <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
      <div class="a">
        <div class="b">
          <div class="b_1">
            <img :src="item.gavatar" alt />
          </div>
          <div class="b_2">
            <div class="b_21">{{item.nickname}}</div>
            <div class="b_22">{{item.logTime}}</div>
          </div>
        </div>
      </div>
      <div class="tip">
        <div>
          <div class="text"><span v-if="item.logRole=='1'">买家</span><span v-if="item.logRole=='2'">卖家</span>于{{item.logTime}}{{item.logTitle}}。</div>
          <div class="text" >
            <span>退货商品：</span><span v-if="item.goodsName!=null">{{item.goodsName}}</span><span v-else>--</span>
          </div>
          <div class="text" >
            <span>退货商品数量：</span><span v-if="item.goodsCount!=null">{{item.goodsCount}}件</span><span v-else>--</span>
          </div>
          <div class="text">
            <span>退款原因：</span><span v-if="item.refundReason!=null">{{item.refundReason}}</span><span v-else>--</span>
          </div>
          <div class="text">
            <span>退款说明：</span><span v-if="item.refundNote!=null">{{item.refundNote}}</span><span v-else>--</span>
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <!-- <div class="btn">我要留言</div> -->
    </div>
  </div>
</template>

<script>
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  data() {
    return {
      userId:'',
      refundId:'',
      detailList: []
    };
  },
  methods: {
    getInfo() {
      let that = this;
      let url = this.$api+'/marketorderservice/api/v1/market/refund/log/list';
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        if(res.data){
          that.detailList = res.data.refundRVo.refundLogRVoList;
        }else{
          that.$toast(res.messageList[0].message)
        }
      });
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.getInfo();
  }
};
</script>

<style scoped="">
.b {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.b_1 img {
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 5px;
}
.b_2 {
  flex: 1;
  padding: 0 20px 0 10px;
}
.b_21 {
  font-size: 14px;
  display: -webkit-box;
  font-weight: bold;
  opacity: 0.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.b_22 {
  color: #ccc;
  margin-top: 5px;
}
.a {
  padding: 10px 15px;
}
.tip {
  padding: 0 15px;
}
.text {
  line-height: 24px;
  font-size: 12px;
  color: #999999;
}
.button{
  position: fixed;
  bottom: 0;
  text-align: center;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  width: 100%;
}
.btn{
  width: 100%;
  background-color: #FFD630;
}
</style>